<template>
  <view class="change-city-list">
    <view class="current-city">
      <view class="auto-position">
        <text class="iconfont icon-dingwei"></text>
        <text>自动定位</text>
      </view>
      <view class="city">{{ city }}</view>
    </view>
    <hot-city></hot-city>
  </view>
</template>

<script>
import HotCity from './HotCity.vue'
export default {
  name: 'ChangeList',
  components: { HotCity },
  data() {
    return { city: uni.getStorageSync('city') }
  }
}
</script>

<style lang="scss" scoped>
.change-city-list {
  .current-city {
    height: 200rpx;
    display: flex;
    margin: 0 0 30rpx 0;
    flex-direction: column;
    .auto-position,
    .city {
      font-size: 28rpx;
      padding: 0 20rpx;
      background: #171827;
      flex: 1;
      display: flex;
      align-items: center;
      color: #eee;
      .icon-dingwei {
        color: skyblue;
      }
    }
  }
}
</style>
